<template>
  <div class="add-templates">
    <div class="title">{{ title }}</div>
    <el-form
      :model="templatesInfo"
      :rules="templatesFormRules"
      ref="templatesInfo"
    >
      <div class="menu-dialog">
        <el-form-item label="模板名称：" prop="template_name">
          <el-input
            v-model="templatesInfo.template_name"
            placeholder="请输入模板名称"
          ></el-input>
        </el-form-item>
        <div class="tree-view">
          <p>权限分配:</p>
          <el-form-item>
            <el-tree
              :data="list"
              show-checkbox
              node-key="shelf_id"
              :props="defaultProps"
              @check="checkedNodes"
              :default-checked-keys="rule"
            ></el-tree>
          </el-form-item>
        </div>
      </div>
      <el-form-item>
        <el-button type="primary" @click="confirmClick('templatesInfo')"
          >确 定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: Number,
      default: 0,
    },
    layerid: {
      type: String,
      default: "",
    },
    template_id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      templatesInfo: {
        template_name: "",
        rule: "",
      },
      templatesFormRules: {
        template_name: [
          {
            required: true,
            message: "请输入模板名称",
          },
        ],
      },
      title: "",
      list: [],
      info: {},
      rule: [],
      defaultProps: {
        children: "sup",
        label: "name",
      },
      checkedList: "",
    };
  },
  methods: {
    init() {
      let data = {};
      if (this.type == 1) {
        this.title = "编辑模板";
        data.template_id = this.template_id;
      } else {
        this.title = "添加模板";
      }
      this.$http(this.$ApiList.TemplateInfo, data).then((res) => {
        const { list,info } = res.datas
        this.list = list;
        if (this.type != 1) {
          this.info = info;
          this.rule =info.rule;
        }else{
            let rule = []
            this.templatesInfo.template_name = info.template_name;
            this.templatesInfo.rule = info.rule;
            info.rule.split(',').forEach(item=>{
              list.forEach(data=>{
                if(data.sup.length){
                  let length = 0;
                  data.sup.forEach(res=>{
                    if(res.shelf_id == item){
                      rule.push(res.shelf_id);
                      length ++;
                    }
                  })
                  if(length == data.sup.length){
                    rule.push(data.shelf_id)
                  }
                }else{
                  if(item == data.shelf_id){
                    rule.push(data.shelf_id);
                  }
                }
              })
            })
          this.rule = rule
        }
      });
    },
    checkedNodes(data, checked) {
      let arr = checked.checkedKeys;
      let checkedList = [];
      arr.forEach(item=>{
        this.list.forEach(data=>{
          if(data.sup.length){
            data.sup.forEach(res=>{
              if(item === res.shelf_id){
                checkedList.push(res.shelf_id);
                checkedList.push(data.shelf_id);
              }
            })
          }else{
            if(item == data.shelf_id){
              checkedList.push(data.shelf_id);
            }
          }
        })
      })
      this.templatesInfo.rule = (Array.from(new Set(checkedList))).join(',');
    },
    confirmClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 添加模板
          if (this.type != 1) {
            this.$http(this.$ApiList.TemplateAdd, this.templatesInfo).then(
              (res) => {
                this.$message.success(res.datas);
                this.$layer.close(this.layerid);
                this.$parent.init();
              }
            );
          } else {
            // 编辑模板
            this.templatesInfo.template_id = this.template_id
            this.$http(
              this.$ApiList.TemplateEdit,
              this.templatesInfo
            ).then((res) => {
                this.$message.success(res.datas);
                this.$layer.close(this.layerid);
                this.$parent.init();
            });
          }
        }
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.add-templates {
  padding: 30px;
}
</style>